<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
    <el-breadcrumb-item
        v-for="(item, index) in breadcrumbList"
        :key="item.path || index"
        @click.native="goTo(item)"
    >
      <span :class="{'current-page': isActive(item), 'clickable': item.path}" >
        {{ item.label }}
      </span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'BreadCrumb',  // 添加组件名称
  data() {
    return {
      breadcrumbList: [],
    };
  },
  watch: {
    $route: {
      handler() {
        this.generateBreadcrumb();
      },
      immediate: true,
    },
  },
  methods: {
    generateBreadcrumb() {
      this.breadcrumbList = this.getBreadcrumbList(this.$route);
    },
    getBreadcrumbList(route) {
      const breadcrumbList = [];
      // 添加首页
      breadcrumbList.push({ label: '首页', path: '/main' });
        // 平台统计相关
      if (route.path.includes('/main/visit-stats')) {
        breadcrumbList.push({ label: '平台统计', path: '' });
        breadcrumbList.push({ label: '访问统计', path: '/main/visit-stats' });
      }
      else if (route.path.includes('/main/product-stats')) {
        breadcrumbList.push({ label: '平台统计', path: '' });
        breadcrumbList.push({ label: '产品统计', path: '/main/product-stats' });
      }
      else if (route.path.includes('/main/order-stats')) {
        breadcrumbList.push({ label: '平台统计', path: '' });
        breadcrumbList.push({ label: '订单统计', path: '/main/order-stats' });
      }
      else if (route.path.includes('/main/customer-stats')) {
        breadcrumbList.push({ label: '平台统计', path: '' });
        breadcrumbList.push({ label: '客户统计', path: '/main/customer-stats' });
      }
      // 平台管理相关
      else if (route.path.includes('/main/carousel')) {
        breadcrumbList.push({ label: '平台管理', path: '' });
        breadcrumbList.push({ label: '轮播图管理', path: '/main/carousel' });
      }
      else if (route.path.includes('/main/message-template')) {
        breadcrumbList.push({ label: '平台管理', path: '' });
        breadcrumbList.push({ label: '消息模板', path: '/main/message-template' });
      }
      else if (route.path.includes('/main/platform-settings')) {
        breadcrumbList.push({ label: '平台管理', path: '' });
        breadcrumbList.push({ label: '平台设置', path: '/main/platform-settings' });
      }
      // 原有的路由判断
      else if (route.path.includes('/main/country')) {
        breadcrumbList.push({ label: '产品管理', path: '' });
        breadcrumbList.push({ label: '国家列表', path: '/main/country' });
      }
      else if (route.path.includes('/main/account')) {
        breadcrumbList.push({ label: '账号管理', path: '/main/account' });
      }
      else if (route.path.includes('/main/template')) {
        breadcrumbList.push({ label: '产品管理', path: '' });
        breadcrumbList.push({ label: '申请表模板', path: '/main/template' });
        if(route.path.includes('/main/template/addTemplate')){
          breadcrumbList.push({ label: '新增模板', path: '/main/template/addTemplate' });
        }else if(route.path.includes('/main/template/editTemplate')){
          const templateId = route.params.id;
          breadcrumbList.push({ label: '编辑模板', path: `/main/template/editTemplate/${templateId}` });
          if (route.path.includes('/field')) {
            breadcrumbList.push({ label: '字段表', path: `/main/template/editTemplate/${templateId}/field` });
          }
        }else if(route.path.includes('/main/template/fieldLibrary')){
          breadcrumbList.push({label: '字段库', path: '/main/template/fieldLibrary'});
        }
      }
      else if (route.path.includes('/main/customer')) {
        breadcrumbList.push({ label: '客户管理', path: '/main/customer' });
        if (route.path.includes('/detail/')) {
          breadcrumbList.push({ label: '客户详情', path: route.path });
        }
      }
      else if(route.path.includes('/main/visaProduct')){
        breadcrumbList.push({ label: '产品管理', path: '' });
        breadcrumbList.push({label: '签证产品', path: '/main/visaProduct'});
        if(route.path.includes('/main/visaProduct/addVisaProduct')){
          breadcrumbList.push({label: '新增签证产品', path: '/main/visaProduct/addVisaProduct'});
        }else if(route.path.includes('/main/visaProduct/editVisaProduct')) {
          const visaProductId = route.params.id;
          breadcrumbList.push({label: '编辑签证产品', path: `/main/visaProduct/editVisaProduct/${visaProductId}`});
        }
      }
      else if (route.path.includes('/main/visa-material-requirement')) {
        breadcrumbList.push({ label: '产品管理', path: '' });
        breadcrumbList.push({ label: '签证材料要求', path: '/main/visa-material-requirement' });
      }
      else if (route.path.includes('/main/material-template')) {
        breadcrumbList.push({ label: '产品管理', path: '' });
        breadcrumbList.push({ label: '材料模板管理', path: '/main/material-template' });
      }
      else if (route.path.includes('/main/member')) {
        breadcrumbList.push({ label: '会员管理', path: '/main/member' });
        if (route.path.includes('/detail/')) {
          breadcrumbList.push({ label: '会员详情', path: route.path });
        }
      }
      // 删除其他产品的路由判断
      return breadcrumbList;
    },
    goTo(item) {
      if (item.path && this.$route.path !== item.path) {
        this.$router.push({ path: item.path }).catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            console.error('导航错误:', err);
          }
        });
      }
    },
    isActive(item) {
      return this.$route.path === item.path;
    },
  },
};
</script>

<style scoped>
.breadcrumb {
  padding: 8px 0;
  font-size: 14px;
}

.clickable {
  cursor: pointer;
  transition: color 0.3s;
}

.clickable:hover {
  color: #409eff;
}

.current-page {
  font-weight: bold;
  color: #303133;
}

/* 非当前页面且无链接的项目样式 */
.breadcrumb .el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner {
  color: #909399;
}

/* 最后一项样式 */
.breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #303133;
  cursor: default;
}

/* 分隔符样式 */
.breadcrumb .el-breadcrumb__separator {
  color: #909399;
  margin: 0 8px;
}
</style>